<template>
  <el-table
    v-loading="params.loading"
    :data="params.data"
    border
    style="width: 100%">

    <el-table-column v-if="params.selection" :fixed="params.selectionFixed" type="selection" width="55"></el-table-column>

    <template v-for="(column, array_index) in params.columns" :key="array_index">
      <el-table-column
      width="auto"
      show-overflow-tooltip
      :prop="column.PropertyName"
      :label="column.HeaderName">
      </el-table-column>
    </template>
    <slot name="last"></slot>

  </el-table>
  <div class="pagination">
   <el-pagination
      background
      :hide-on-single-page="true"
      @size-change="handleSizeChange"
      @current-change="handleSizeChange"
      :current-page="params.pageIndex"
      :page-sizes="[10, 50, 100]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="params.total">
    </el-pagination>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from "vue";
import settings from '@/config/settings'

export declare type ColumnProperty = {
  HeaderName: string;
  PropertyName: string;
  Drop?: string;
  Required?: boolean;
  Format?: string;
  Sort?: Number;
  Export?: boolean;
  Import?: boolean;
  Visible?: boolean;
  Searchable?: boolean;
  Orderable?: boolean;
  Editable?: boolean;
}

export declare type TableSetupData = {
    loading: boolean;
    columns: ColumnProperty[];
    data: any;
    total: Number;
    pageSize: Number;
    pageIndex: Number;
    selection: boolean;
    selectionFixed: boolean;
    pageFunc: Function;
}

export let defaultTableSetupData = function(): TableSetupData{
    return {
          loading:false,
          columns:[],
          data:[],
          total: 0,
          pageSize: settings.pageSize,
          pageIndex:1,
          selection:false,
          selectionFixed:false,
          pageFunc: ()=>{}
    } 
}

export default defineComponent({
  methods: {  
    handleSizeChange(pageSize:Number){      
      console.log(pageSize)
      console.log(this.params)
      /*
      https://v3.vuejs.org/guide/component-template-refs.html
      https://v3.vuejs.org/guide/composition-api-template-refs.html#template-refs

      // 这里的 multipleTable 是上面ref的值。 直接访问子组件实例上的属性。
      this.$refs.multipleTable.selection
      */
      this.params.pageFunc(this.params.pageIndex, pageSize)
    },
    handleCurrentChange(pageIndex:Number){
      console.log(pageIndex)
      console.log(this.params)
      this.params.pageFunc(pageIndex, this.params.pageSize)
    }
  },
  props: {
    params:{
      default: defaultTableSetupData
    }
  },
  setup(props){
    
  }
});
</script>

<style scoped lang="scss">
.pagination {
  padding: 10px;
  display: flex;
  background: #fff;
}
</style>